body {
}

.box {
    background-color: #5baad8;
    height: 200px;
    margin: 20px;
}

.Grid {
    display: flex;
}

.Grid-cell {

    flex: 1; /*等分空间*/
}

.Grid-cell.u-full {
    flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
    flex: 0 0 50%; /*????????????*/
}

.Grid-cell.u-1of3 {
    flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
    flex: 0 0 25%;
}

/*圣杯布局*/
.HolyGrail {
    display: flex;
    min-height: 800px;
    flex-direction: column;
}

header, footer {
    flex: 1;
    margin: 4px;
    padding: 5px;
    min-height: 100px; /*最小高度*/
    border: 1px solid #eebb55;
    border-radius: 7pt;
    background: #ffeebb;
}

.HolyGrail-body {
    display: flex;
    flex: 1;
}

.HolyGrail-content {
    background-color: #5baad8;
    border: 1px solid #eebb55;
    flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
    background-color: #5baad8;
    border: 1px solid #eebb55;

    /* 两个边栏的宽度设为12em */
    flex: 0 0 12em;
}

.HolyGrail-nav {
    /* 导航放到最左边 */
    order: -1;
}

@media (max-width: 768px) {
    .HolyGrail-body {
        flex-direction: column;
        flex: 1;
    }

    .HolyGrail-nav,
    .HolyGrail-ads,
    .HolyGrail-content {
        flex: auto;
    }
}

/*输入框*/
.InputAddOn {
    display: flex;
}

.InputAddOn-field {
    flex: 1;
}

/*悬挂式布局*/
.Media {

    display: flex;
    align-items: flex-start;
}

.Media-box {
    flex: 1;
    display: flex;
    margin: 20px;
}

.Media-left {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.Media-left-s {
    flex: 1;
    display: flex;
    padding: 20px;
    background-color: aliceblue;
    margin-bottom: 20px;
}

.Media-figure {
    margin-right: 1em;
    width: 184px;
    height: 184px;
}

.Media-right {
    justify-content: flex-end;
    background-color: aliceblue;
    padding: 20px;

}

/*固定的底部*/
.Site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
    flex-direction: column;
}

/*流式布局，每行的项目数固定，会自动分行*/
.parent{
    width: 1000px;
    height: 1000px;
    background-color: #5baad8;
    display: flex;
    flex-flow: row wrap;/*flex-direction flex-wrap的简写*/
    align-content: flex-start;
    margin-left: auto;
    margin-right: auto;
}
.child{
    box-sizing: border-box;/*box-sizing:用来改变和模型计算方式，只有border-box和content-box两个属性。
                           默认content-box既width和height只包括内容的宽和高，不包括border padding margin；boder-box使width和height除了margin外都包括了*/
    background-color: white;
    flex: 0 0 25%;
    height: 25%;
    border: 1px solid rosybrown;
}

























